<template>
  <div class="right-container">
    <h3>Right 组件---是否全选：{{ isAll }}</h3>
    <hr />

    <p>count 值：{{ count }}{{ name }}</p>
    <button @click="btn" class="btn btn-warning">-1</button>
    <button
      @click="$store.dispatch('subAsync', { num: -7 })"
      class="btn btn-warning"
    >
      异步-5
    </button>
    <!-- <button @click="$store.dispatch('subAsync',{num:-7})" class="btn btn-warning">异步-5</button> -->
    <button @click="test" class="btn btn-primary">调用子模块的test函数</button>
  </div>
</template>

<script>
// 导入辅助函数
// mapState本质是一个函数，返回值是一个对象
// mapState需要传入数组
// mapState会返回一个对象，对象中存储了全局数据传来的数据对应的函数
// 只需...展开返回的结果就能获得映射过来的计算属性
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

// console.log(mapState(['count','name']));
export default {
  name: "Right",
  computed: {
    // 多了一个count属性
    // 调用mapState并将
    // ...mapState(['count','name'])
    ...mapState(["count", "name"]),
    ...mapGetters(["isAll"]),
  },
  methods: {
    // 在methods中调用mapMutations传入要映射的mutations传入要映射的mutation函数，将结果用...展开运算符展开
    // 在mapMutations后，可以在当前组件中访问到add函数
    // 所以add函数也可以直接作为事件处理函数进行绑定，当事件触发时会自动执行add函数
    ...mapMutations(["add"]),
    btn() {
      this.add({ num: -1 });
    },
    ...mapMutations('counte', ['test'])
    // ...mapActions(["subAsync"]),
  },
};
</script>

<style>
</style>
